<template lang="pug">
van-popup.pop-modal(v-model:show="show" :overlay="false" round :close-on-click-overlay="false")
  .pop-modal-con
    .pop-modal-title {{ title }}
    .pop-modal-text {{ content }}
    div(v-if="showCancel || showConfirm"
      class="pop-modal-btn"
      :class="[!showCancel || !showConfirm ? 'pop-modal-btncenter' : '']")
        van-button.button.cancel-button(v-if="showCancel" round plain size="small" @click.stop="clickBtn('cancel')" :text="cancelText")
        van-button.button.confirm-button(v-if="showConfirm" round plain size="small" @click.stop="clickBtn('confirm')" :text="confirmText")

</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  name: "CommonAlert",
  props: {
    show: Boolean,
    title: String,
    content: String,
    showCancel: Boolean,
    showConfirm: Boolean,
    cancelText: String,

    // cancelColor: "",
    // cancelBgColor: "",
    // cancelBorderColor: "",

    confirmText: String,
    success: Function,

    // confirmColor: "",
    // confirmBgColor: "",
    // confirmBorderColor: "",
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const updateShow = (show) => proxy.$emit("update:show", show);
    const clickBtn = (res) => {
      props.success &&
        props.success({
          confirm: res === "confirm",
        });
      updateShow(false);
    };
    return {
      clickBtn,
    };
  },
};
</script>

<style lang="stylus" scoped>
.pop-modal {
  .pop-modal-con {
    width: 5.1rem;
    padding: .8rem .5rem .6rem;
    background-color: #121219;
    box-sizing: border-box;
  }

  .pop-modal-title {
    text-align: center;
    font-size: .34rem;
    color: #fa6a62;
    letter-spacing: .02rem;
  }

  .pop-modal-text {
    font-size: .28rem;
    font-weight: 400;
    color: #8989A1;
    line-height: .5rem;
    margin-top: .2rem;
    word-break: break-all;
  }

  .pop-modal-btn {
    display: flex;
    justify-content: space-evenly;
    margin-top: .5rem;

    .button {
      border: none;
      background: none;
      height: .56rem;
      border-radius: .56rem;
      letter-spacing: .04rem;
      font-size: .26rem;
      color: #fff;
      padding: 0 .25rem;
    }

    .cancel-button {
      border: .02rem solid rgb(137, 137, 161);
      color: rgb(137, 137, 161);
    }

    .confirm-button {
      background: linear-gradient(102deg, rgb(253, 143, 97) 0%, rgb(248, 75, 98) 56%, rgb(116, 57, 138) 100%);
      border-color: rgb(18, 18, 25);
    }
  }

  .pop-modal-btncenter {
    justify-content: center;
  }

}
</style>
